import PropTypes from 'prop-types'
import React, { memo, useState } from 'react'
import { SectionTabWrapper } from './style'
import classNames from 'classnames'
import ScollView from '@/base-ui/scoll-view'

const SectionTab = memo(({tabs, changeEvent}) => {
  const [currentIndex, setCurrentIndex] = useState(0)
  // 处理点击事件 
  function changeHandler(index){
    // 设置当前点击元素下标 用于显示active样式
    setCurrentIndex(index)
    // 执行外部传入的点击回掉函数 传入点击的元素和下标
    changeEvent(tabs[index], index)
  }
  return (
    <SectionTabWrapper>
        <ScollView>
        {
            tabs.map((tab, index) => (
                <div key={index} 
                className={classNames("tab", {active: currentIndex === index})}
                onClick={() => changeHandler(index)}
                >
                {tab}</div>
            ))
        }
        </ScollView>
    </SectionTabWrapper>
  )
})

SectionTab.propTypes = {
    tabs: PropTypes.array,  //所需的tabs数组
    changeEvent: PropTypes.func  //点击每个tab的回掉事件 传入点的tab和下标
}

export default SectionTab